<template>
  <div class="w-100">
    <div id="resource-container" width="100%" height="100%"></div>
  </div>
</template>
<script lang="ts" setup>
import G6 from '@antv/g6';
import allData from './fixData';
import { onMounted } from 'vue';
interface TreeForG6 {
  id: string;
  /** 名称 */
  label: string;
  children?: TreeForG6[];
}
const handleData1 = (data: TreeForG6[]) => {
  return data.map((item: TreeForG6) => {
    if (item.children) {
      return {
        id: String(item.id),
        label: item.label,
        collapsed: true,
        children: handleData1(item.children),
      };
    }
    return { ...item, id: String(item.id) } as TreeForG6;
  });
};
onMounted(() => {
  const allList = handleData1(allData.data);
  const resourceList = { id: '0', label: '资源目录', children: allList };
  const container = document.getElementById('resource-container');
  if (container) {
    const width = container.offsetWidth;
    const height = container.offsetHeight || 500;
    const graph = new G6.TreeGraph({
      container: 'resource-container',
      width,
      height,

      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const data = item?.get('model');
              data.collapsed = collapsed;
              return true;
            },
          },
          'drag-canvas',
          'zoom-canvas',
        ],
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      },
      defaultEdge: {
        type: 'cubic-horizontal',
      },
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: () => {
          return 16;
        },
        getWidth: () => {
          return 16;
        },
        getVGap: () => {
          return 10;
        },
        getHGap: () => {
          return 100;
        },
        getSide: () => {
          return 'right';
        },
      },
    });
    let centerX = 0;
    graph.node((node) => {
      if (node.id === resourceList.id) {
        // @ts-ignore
        centerX = node.x;
      }

      return {
        label: node.label,
        labelCfg: {
          position:
            node.children && node.children.length > 0
              ? 'right'
              : // @ts-ignore
              node.x > centerX
              ? 'right'
              : 'left',
          offset: 5,
        },
      };
    });
    graph.data(resourceList);
    // graph.data(headImageData);

    graph.render();
    graph.fitView();

    if (typeof window !== 'undefined') {
      window.addEventListener('resize', () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      });
    }
  }
});
</script>
<style lang="scss">
#resource-container {
  position: relative;
  width: 100%;
  height: 100%;
  .export-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 60px;
    top: 30px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    background-color: rgba(0, 157, 219, 1);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }
}
</style>
